<template>
  <div>
    <el-descriptions title="用户信息" :column="2" border>
      <el-descriptions-item label="姓名" width="25%">
        {{ userInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item label="手机号" width="25%">
        {{ userInfo.phone }}
      </el-descriptions-item>
      <el-descriptions-item label="状态" width="25%">
        {{ userInfo.param.statusString }}
      </el-descriptions-item>
      <el-descriptions-item label="注册时间" width="25%">
        {{ userInfo.createTime }}
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="认证信息"
      :column="2"
      border
      :style="{ margin: '20px 0' }"
    >
      <el-descriptions-item label="姓名" width="25%">
        {{ userInfo.name }}
      </el-descriptions-item>
      <el-descriptions-item label="证件类型" width="25%">
        {{ userInfo.certificatesType }}
      </el-descriptions-item>
      <el-descriptions-item label="证件号" width="25%">
        {{ userInfo.certificatesNo }}
      </el-descriptions-item>
      <el-descriptions-item label="证件图片" width="25%">
        {{ userInfo.certificatesUrl }}
      </el-descriptions-item>
    </el-descriptions>
    <el-table :data="patientList" border stripe>
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="姓名" prop="name"> </el-table-column>
      <el-table-column label="证件类型" prop="param.certificatesTypeString">
      </el-table-column>
      <el-table-column label="证件编号" prop="certificatesNo">
      </el-table-column>
      <el-table-column label="性别">
        <template v-slot="{ row }">
          <span>{{ row.sex ? "男" : "女" }} </span>
        </template>
      </el-table-column>
      <el-table-column label="出生年月" prop="birthdate"> </el-table-column>
      <el-table-column label="手机号" prop="phone"> </el-table-column>
      <el-table-column label="是否结婚">
        <template v-slot="{ row }">
          <span>{{ row.isMarry ? "是" : "否" }} </span>
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="param.fullAddress"> </el-table-column>
      <el-table-column label="注册时间" prop="createTime"> </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  name: "VipDetail",
});
</script>

<script setup lang="ts">
import { onMounted } from "vue";
import { useRoute } from "vue-router";
import { reqGetVipDetail } from "@/api/vip";
import type { UserInfoType } from "@/api/vip/types";
// import { ElMessage } from "element-plus";

const route = useRoute();
const patientList = ref<any>([]);
const userInfo = ref<UserInfoType>({
  id: 0,
  createTime: "",
  updateTime: "",
  param: {
    statusString: "",
    authStatusString: "",
  },
  certificatesType: "",
  certificatesNo: "",
  certificatesUrl: "",
  nickName: "",
  phone: "",
  name: "",
  status: 0,
});

onMounted(async () => {
  const { id }: any = route.query;
  const res = await reqGetVipDetail(id);
  userInfo.value = res.userInfo;
  patientList.value = res.patientList;
  console.log(res);
});
</script>

<style scoped>
.bc {
  background-color: #fafafa;
  min-height: 36px;
  line-height: 36px;
  width: 100%;
  border: 1px #fff solid;
}
</style>
